<template>
  <div class="form-format">
    <el-row :gutter="20" style="margin-top:10px;">
      <el-col :span="8">
        商品名:  <el-input v-model="searchData.name" placeholder="请输入内容" style="width:70%" size="small" />
      </el-col>
      <el-col :span="8">
        类型: <el-select v-model="searchData.classs" placeholder="请选择" size="small" style="width:70%">
          <el-option
            v-for="v in all_class"
            :key="v.id"
            :label="v.cat_name"
            :value="v.cat_name"
          />
        </el-select>
      </el-col>
      <el-col :span="8">
        所属店铺: <el-select v-model="searchData.shop" placeholder="请选择" size="small" style="width:70%">
          <el-option
            v-for="v in all_shop"
            :key="v.id"
            :label="v.shop_name"
            :value="v.shop_name"
          />
        </el-select>
      </el-col>
    </el-row>

    <el-row type="flex" justify="space-between" style="margin-top:20px;">
      <el-col :span="3.9">
        <el-button type="primary" icon="el-icon-plus" size="small" @click="showDialog = true">
          新增
        </el-button>
      </el-col>
      <el-col :span="3.9">
        <el-button type="primary" size="small" @click="findfoods">
          查询
        </el-button>
        <el-button size="small" @click="resetgoods">
          重置
        </el-button>
      </el-col>
    </el-row>

    <el-alert
      style="margin:13px 0;"
      :title="`已选择 ${total} 项   总价值：${totalvalue} 万  `"
      type="info"
      show-icon
      :closable="false"
    />
    <el-table
      ref=""
      style="width: 100%;"
      :data="shopData"
      @select="select"
      @select-all="selectAll"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        prop="id"
        label="商品编号"
        width="80"
        fixed="left"
      />
      <el-table-column
        prop="good_name"
        label="商品名"
        width="180"
      />
      <el-table-column
        prop="shop_name"
        label="所属店铺"
        width="120"
      />
      <el-table-column
        prop="types_of"
        label="类型"
      />
      <el-table-column
        prop="cost_prc"
        label="成本价"
      >
        <template #default="{row}">
          {{ row.cost_prc }}RMB
        </template>
      </el-table-column>
      <el-table-column
        prop="original_prc"
        label="原价"
      >
        <template #default="{row}">
          {{ row.original_prc }}RMB
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="address"
        label="销售价"
      /> -->
      <el-table-column
        prop="in_stk"
        label="库存量"
      >
        <template #default="{row}">
          {{ row.in_stk }}件
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="address"
        label="月销售"
      />
      <el-table-column
        prop="address"
        label="总销售量"
      />
      <el-table-column
        prop="address"
        label="月销售额"
      />
      <el-table-column
        prop="address"
        label="总销售额"
      /> -->
      <el-table-column
        prop="activity"
        label="参与活动"
      />
      <el-table-column
        prop="hot_cakes"
        label="是否热销"
      >
        <template #default="{row}">
          <div>
            <i
              :class="
                row.hot_cakes ?
                  'status-display-true'
                  : 'status-display-false'
              "
            />
            <!-- {{ row }} -->
            <!-- {{ row.hot_cakes }} -->
            {{ row.hot_cakes ? '热销':'未热销' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="rcmd"
        label="是否推荐"
      >
        <template #default="{row}">
          <div>
            <i
              :class="
                row.rcmd ? 'status-display-true'
                : 'status-display-false'
              "
            />
            {{ row.rcmd ? "推荐" : "未推荐" }}
          </div></template>
      </el-table-column>
      <el-table-column
        prop="sts"
        label="状态"
      >
        <template #default="{row}">
          <div>
            <i
              :class="
                row.sts ? 'status-display-true'
                : 'status-display-false'
              "
            />
            {{ row.sts ? "上架" : "下架" }}
          </div></template>
      </el-table-column>
      <el-table-column
        prop="disc"
        label="是否可用优惠券"
      >
        <template #default="{row}">
          <div>
            <i
              :class="
                row.disc ? 'status-display-true'
                : 'status-display-false'
              "
            />
            {{ row.disc ? "可用" : "不可用" }}
          </div></template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作"
        fixed="right"
        width="180"
      >
        <template #default="{row}">
          <el-button type="text" @click="setGrounding(row)">{{ row.sts === true ? "下架" : "上架" }}</el-button>
          <el-button type="text" @click="goDelete(row.id)">删除</el-button>
          <el-button type="text" @click="goEdit(row)">编辑</el-button>
          <el-button type="text" @click="goInformation(row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      style="margin-top:20px;"
      background
      :page-sizes="[2,4,6,8,10]"
      :page-size="page.pagesize"
      :current-page="page.page"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
      @size-change="sizeChange"
      @current-change="changePage"
    />

    <!-- 对话框组件 -->
    <dialog-tool ref="dialog" :show-dialog.sync="showDialog" :current-data="currentData" @update="getData" />
    <!-- 抽屉组件 -->
    <drawer ref="drawer" :show-drawer.sync="showDrawer" :current-shop-data="currentData" @edit="getData" />
  </div>
</template>

<script>
import DialogTool from '@/views/goodslist/components/dialogtool'
import Drawer from '@/views/goodslist/components/drawer'
import { getData, deleteShopList, editData, pagination, getClass, xxxx } from '@/api/goods'
import { getListData } from '@/api/shop/trade'
export default {
  components: {
    DialogTool,
    Drawer
  },
  data() {
    return {
      searchData: {
        classs: '',
        name: '',
        shop: ''
      },
      all_class: [], // 所有类型
      all_shop: [], // 所有店铺
      // 总价值
      totalvalue: 0,
      total: 0,
      page: {
        page: 1,
        pagesize: 4,
        total: 0
      },
      showDrawer: false,
      showDialog: false, // 控制dialog组件的隐藏与显示
      shopData: '', // 列表数据
      currentData: {} // 当前数据
    }
  },
  created() {
    this.getData()
    this.getClass()
    this.getListData()
  },
  methods: {
    // toggleSelection(rows) {
    //   if (rows) {
    //     rows.forEach(row => {
    //       this.$refs.multipleTable.toggleRowSelection(row)
    //     })
    //   } else {
    //     this.$refs.multipleTable.clearSelection()
    //   }
    // },
    resetgoods() {
      this.searchData = {
        classs: '',
        name: '',
        shop: ''
      }
    },
    // 查询
    findfoods() {
      console.log(this.searchData.classs)
      xxxx(this.searchData).then(res => {
        this.shopData = res.data
        console.log(res)
      })
      // console.log(data)
      // console.log(56789)
    },
    // 获得类型
    async getClass() {
      const { data } = await getClass()
      this.all_class = data.filter(v => v.cat_level === 2)
    },
    async getListData() {
      const { data } = await getListData()
      console.log(data)
      console.log(999)
      this.all_shop = data
    },
    selectAll(selection) {
      this.total = selection.length
      this.totalvalue = 0
      selection.forEach(v => {
        this.totalvalue += v.original_prc * v.in_stk
      })
    },
    select(selection) {
      console.log(selection)
      this.totalvalue = 0
      this.total = selection.length
      selection.forEach(v => {
        this.totalvalue += v.original_prc * v.in_stk
      })
    },
    changePage(newPage) {
      this.page.page = newPage
      this.getData()
    },
    sizeChange(size) {
      this.page.pagesize = size
      this.getData()
    },
    // 查看详情
    goInformation(data) {
      this.currentData = { ...data }
      this.showDrawer = true
      this.$nextTick(() => {
        this.$refs.drawer.assignment()
      })
    },
    // 编辑
    goEdit(data) {
      this.showDialog = true
      this.currentData = { ...data }
      this.$nextTick(() => {
        this.$refs.dialog.assignment()
      })
    },
    // 上架或下架
    async setGrounding(data) {
      this.$confirm(`此操作将修改该商品状态, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        data.sts = !data.sts
        return editData(data)
      }).then(() => {
        this.getData()
        this.$message.success('修改成功')
      })
    },
    // 删除
    async goDelete(id) {
      // console.log('123452134562346')
      this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return deleteShopList(id)
      }).then(() => {
        this.getData()
        this.$message.success('删除成功')
      })
    },
    async getData() {
      const res = await getData()
      const { data } = await pagination(this.page)
      this.page.total = res.total
      this.shopData = data
      console.log(this.shopData, 'sdfsdfwdfgdf')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-collapse-item__header {
  padding: 0px 20px;
  background-color: rgba(233, 233, 233, 1);
}

::v-deep .el-collapse{
  border: 1px solid rgba(233, 233, 233, 1) !important;
}
::v-deep .el-collapse-item__wrap{
  padding-top: 20px;
}

// 提示样式
.is-light{
  background-color:#e6f7ff;
  ::v-deep .el-alert__icon{
    color: #409eff;
  }
}
.el-pagination__sizes{
  margin-right: 550px;
}

// 状态样式
.status-display-true {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00a854;
}
.status-display-false {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f04134;
}
</style>
